import React, { useEffect, useState } from "react";
import {
  ProductCard,
  PullRefresh,
  NavBar,
  Toast,
  SwipeCell,
  Button,
  Empty,
} from "react-vant";
import "./index.css";
const Index: React.FC = () => {
  let [xclist, setXclist] = useState(JSON.parse(localStorage.getItem("xck")!));
  const qk = () => {
    Toast("清空行程");
    localStorage.removeItem("xck");
    window.location.reload();
  };
  const del = (i: any) => {
    xclist = xclist.filter((item: any) => item.id !== xclist[i].id);
    localStorage.setItem("xck", JSON.stringify(xclist));
    window.location.reload();
  };
  return (
    <div>
      <NavBar
        title="行程"
        leftArrow={false}
        rightText="清空行程"
        onClickRight={() => qk()}
      />

      <div className="xckk">
        {xclist ? (
          xclist.map((v: any, i: any) => (
            <SwipeCell
              rightAction={
                <Button
                  style={{ height: "100%" }}
                  square
                  type="danger"
                  onClick={() => del(i)}
                >
                  删除行程
                </Button>
              }
            >
              <ProductCard
                price={v.price}
                desc={v.word}
                thumb={v.img}
                title={v.title}
                key={v.id}
              />
            </SwipeCell>
          ))
        ) : (
          <Empty
            className="custom-image"
            imageSize={90}
            image={
              <img src="https://img.yzcdn.cn/vant/custom-empty-image.png" />
            }
            description="还没有行程"
          />
        )}
      </div>
    </div>
  );
};
export default Index;
